<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交易席位</title>
    <link href="layui/css/layui.css" rel="stylesheet" media="all">
    <script src="layui/layui.js"></script>
</head>
<body>
<script type="text/html" id="seatToolBar">

    <div style="float:right">
        <button class="layui-btn layui-btn-sm" lay-event="insertSeat">
            <i class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAllSeat">
            <i class="layui-icon">&#xe640;</i>批量删除</button>
    </div>

    <form class="layui-form layui-col-space5">
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label layui-bg-gray" style="width: 90px;text-align: center">席位名称</label>
            <div class="layui-inline layui-show-xs-block">
                <input type="text" id="seatName"  style="width:200px;float:right;height:30px;" placeholder="请输入席位名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label layui-bg-gray" style="width: 90px;text-align: center">席位类型</label>
            <div class="layui-inline layui-show-xs-block">
                <select name="seatType" id="seatTypes" lay-search="" lay-verify="required" style="width: 130px">
                    <option value="">--请选择--</option>
                    <option value="1">贵宾</option>
                    <option value="2">普通</option>
                </select>
            </div>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn layui-btn-primary" lay-event="searchSeat" lay-submit="" lay-filter="searchSeat"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>
    </form>
</script>
<!--数据栏-->
    <script>
    layui.use(['table','form','tableSelect','layer'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var tableSelect = layui.tableSelect;
        var layer = layui.layer;
        table.render({
            elem: '#seat',
            id:'seat',
            url: 'selectTradingSeats?seatType=3',
            page: true,
            height:'full-20',
            id:'seat',
            /*height:'full-90',*/
            toolbar: '#seatToolBar',//显示在表头的工具条
            cellMinWidth: 60,
            limits:[1,2,3,4,5,6,7,8,9,10],
            id:'tables',
            cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'seatId', title: '席位编号', align:'center'}
                    ,{field: 'seatName', title: '席位名称', align:'center'}
                    ,{field: 'seatType', title: '席位类型', align:'center',
                    templet:function (item) {
                        if(item.seatType=="1"){
                            return '贵宾'
                        }else if(item.seatType=="2"){}
                        return '普通'
                    }}
                    ,{field: 'commission', title: '佣金利率(%)', align:'center'}
                    ,{field: 'brokerName', title: '劵商名称', align:'center'}
                    ,{field: 'seatPlace', title: '席位地址', align:'center',
                    templet:function (item) {
                        if(item.seatPlace=="2"){
                            return '上海'
                        }else if(item.seatPlace=="1"){}
                        return '深圳'
                    }}
                    ,{field: 'seatBeiZhu', title: '备注', align:'center'}
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}//编辑删除的按钮
                ]
            ]
        });

            //给工具栏绑定事件
            table.on('toolbar(seat)',function (obj) {
                //根据事件对象 来判定点击的是哪一个按钮
                if(obj.event=='insertSeat'){
                    layer.open({
                        type:1, //iframe 内嵌窗口
                        title: '新增席位信息',
                        area:['700px','400px'],
                        content: $("#addSeat")
                    });
                }else if(obj.event=='searchSeat') {
                    var seatName = $('#seatName').val()
                    var seatType = $('#seatTypes').val()
                    table.reload('tables', {
                        url: 'selectTradingSeats'
                        , page: {
                            curr: 1
                        }
                        , where: {
                            'seatName':seatName
                            ,'seatType':seatType
                        }

                    });
                $('#seatName').val(seatName);
            }else if(obj.event=='deleteAllSeat'){
                var broker = table.broker('broker'); //即为基础参数 id 对应的值
                alert(checkStatus);
                if (checkStatus.data.length > 0) {

                    //获取Id
                    var securitiesNumber = "";
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        if (i == 0) {
                            securitiesNumber = checkStatus.data[i].securitiesNumber;
                        } else {
                            securitiesNumber = checkStatus.data[i].securitiesNumber + "," + securitiesNumber;
                        }
                    }

                }
            }
        });
        //给最右边的列 修改事件
        table.on('tool(seat)', function (obj) {
            switch (obj.event) {
                case "editSeat":
                    //得到选中行的数据
                    var data = obj.data;
                    //JSON.stringify(data)  拼接成JSON格式的字符串
                    var seatObj = $.parseJSON(JSON.stringify(data));
                    //弹出一个修改的窗口
                    form.val("editform", seatObj);
                    layer.open({
                        type: 1, //iframe 内嵌窗口
                        title: '修改角色信息',
                        area: ['700px','400px'],
                        content: $("#editContent"),
                        end:function(){
                            //刷新页面
                            table.reload('seat');

                        }
                    });
                    break;
                case "deleteSeat":
                   layer.confirm('您确定要删除吗', function (index) {
                        layer.close(index);
                        var data = obj.data;
                        $.post(
                            'deleteTradingSeats'
                            ,data
                            ,function(){
                                table.reload('seat');
                            });
                    })
                    break;
            };
        });
        //给增加的form绑定提交事件
        form.on('submit(addform)', function () {
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var formData = form.val("addform");
            $.post(
                "/insertTradingSeats",
                formData,
                function (msg) {
                    //重新刷新表格
                    //给予提示信息，增加成功
                    alert(msg);
                });
        });
        //给修改的form绑定提交事件
        form.on('submit(editform)', function () {
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var formData = form.val("editform");
            $.post(
                "updateTradingSeats",
                formData,
                function (msg) {
                    //重新刷新表格
                    //给予提示信息，修改成功
                    alert(msg);
                });
        });
        //券商id增加隐藏的表单
        tableSelect.render({
            elem:'#insertXllb',
            checkedKey:'brokerName',
            table:{
                url:'selectBroker',
                cellMinWidth: 60,
                cols:[
                    [   {type:'radio'},
                        {field:'brokerId',title:'券商编号',width:200},
                        {field: 'brokerName',title:'券商名称',width: 200},
                    ]
                ]
            },
            done:function (elem,data) {
                //elem:返回之前input对象；data:表格返回的选中的数据 []
                var newJson=[];
                //遍历选中的数据
                $.each(data.data,function (index,item) {
                    newJson.push(item.brokerName);
                    $("#brokerId").val(item.brokerId);
                });
                elem.val(newJson.join(",")); //给输入框里显示的值赋值
            }
        });
        //券商id修改隐藏的表单
        tableSelect.render({
            elem:'#updateXllb',
            checkedKey:'brokerName',//选择表格的那一列的名称
            table:{
                url:'selectBroker',
                cellMinWidth: 60,
                cols:[
                    [   {type:'radio'},
                        {field:'brokerId',title:'券商编号',width:200},
                        {field: 'brokerName',title:'券商名称',width: 200},
                    ]
                ]
            },
            done:function (elem,data) {
                //elem:返回之前input对象；data:表格返回的选中的数据 []
                var newJson=[];
                //遍历选中的数据
                $.each(data.data,function (index,item) {
                    newJson.push(item.brokerName);
                    $("#brokersId").val(item.brokerId);
                });
                elem.val(newJson.join(",")); //给输入框里显示的值赋值
            }
        });
    });
    //提交取消事件触发
    function myclose(){
        layer.closeAll();
    }
</script>
<table id="seat" lay-filter="seat"></table>
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="editSeat"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteSeat"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>

<!-- 交易席位的添加div块 -->
<div id="addSeat"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
    <form id="addform" lay-filter="addform" class="layui-form layui-form-pane"  style="margin: 30px auto; display: inline-block;">
        <div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item" style="text-align: center;">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">席位编号</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="请输入席位编号" name="seatId">
                        </div>
                    </div>
                    <div class="layui-form-item" style="text-align: center;">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">席位名称</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="请输入席位名称" name="seatName">
                        </div>
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">席位类型</label>
                        <div class="layui-input-inline layui-show-xs-block" style="width: 195px;">
                            <select name="seatType" id="seatType" lay-search="" lay-verify="required">
                                <option value="">请选择</option>
                                <option value="1">贵宾</option>
                                <option value="2">普通</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-col-xs6">
                    <div class="layui-form-item" style="text-align: center;">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">佣金利率(%)</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="请输入佣金利率(%)" name="commission">
                        </div>
                    </div>
                    <div class="layui-form-item" style="text-align: center;">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">劵商名称</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="请输入劵商名称" name="brokerName" id="insertXllb">
                            <input type="hidden" name="brokerId" id="brokerId">
                        </div>
                    </div>
                    <label class="layui-form-label layui-bg-gray" style="text-align: center">席位地点</label>
                    <div class="layui-input-inline layui-show-xs-block" style="width: 195px;">
                        <select name="seatPlace">
                            <option value="">请选择</option>
                            <option value="2">上海</option>
                            <option value="1">深圳</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;">
                    <div class="layui-input-inline">
                        <textarea name="seatBeiZhu" style="width: 590px;height: 80px;padding: 10px;"rows="" placeholder="备注"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div style="position: absolute; left: 38%; bottom: 20px;">
            <button class="layui-btn" lay-submit="add" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>新增
            </button>
            <button class="layui-btn layui-btn-primary" type="button" onclick="myclose()" style="background-color: orangered">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>

<!-- 交易席位的修改div块 -->
<div id="editContent"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
    <form id="editform" lay-filter="editform" class="layui-form layui-form-pane"  style="margin: 30px auto; display: inline-block;">
        <div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item" style="text-align: center;">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">席位编号</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="请输入席位编号" name="seatId">
                        </div>
                    </div>
                    <div class="layui-form-item" style="text-align: center;">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">席位名称</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="请输入席位名称" name="seatName">
                        </div>
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">席位类型</label>
                        <div class="layui-input-inline layui-show-xs-block" style="width: 195px;">
                            <select name="seatType" id="seatType1" lay-search="" lay-verify="required">
                                <option value="">请选择</option>
                                <option value="1">贵宾</option>
                                <option value="2">普通</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-col-xs6">
                    <div class="layui-form-item" style="text-align: center;">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">佣金利率(%)</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="请输入佣金利率(%)" name="commission">
                        </div>
                    </div>
                    <div class="layui-form-item" style="text-align: center;">
                        <label class="layui-form-label layui-bg-gray" style="text-align: center">劵商名称</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="请输入劵商名称" name="brokerName" id="updateXllb">
                            <input type="hidden" name="brokerId" id="brokersId">
                        </div>
                    </div>
                    <label class="layui-form-label layui-bg-gray" style="text-align: center">席位地点</label>
                    <div class="layui-input-inline layui-show-xs-block" style="width: 195px;">
                        <select name="seatPlace">
                            <option value="">请选择</option>
                            <option value="2">上海</option>
                            <option value="1">深圳</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;">
                    <div class="layui-input-inline">
                        <textarea name="seatBeiZhu" style="width: 590px;height: 80px;padding: 10px;"rows="" placeholder="备注"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div style="position: absolute; left: 38%; bottom: 20px;">
            <button class="layui-btn" lay-submit="edit" lay-filter="editsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-btn-primary" type="button" onclick="myclose()"  style="background-color: orangered">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
</body>
</html>